<template>
  <div class="doc-menu" v-loading="loading">
    <el-menu :default-active="defaultActive" :default-openeds="defaultOpeneds">
      <div v-for="(item) in treeData" :key="item.id" :index="item.id.toString()">
        <template v-if="item.children">
          <el-sub-menu :index="item.id.toString()">
            <template #title>{{ item.name }}</template>
            <div v-for="(item1) in item.children" :key="item1.id" :index="item1.id.toString()">
              <template v-if="!item1.children">
                <el-menu-item @click="handleNodeClick(item1)" :index="item1.id.toString()">
                  <span>{{ item1.name }}</span>
                  <span class="method" :style="{ color: methodStyle[item1.requestType] }">{{ item1.requestType }}</span>
                </el-menu-item>
              </template>
              <template v-else>
                <el-sub-menu :index="item1.id.toString()">
                  <template #title>{{ item1.name }}</template>
                  <el-menu-item-group>
                    <el-menu-item v-for="(item2) in item1.children" :key="item2.id" :index="item2.id.toString()"
                      @click="handleNodeClick(item2)">
                      <span>{{ item2.name }}</span>
                      <span class="method" :style="{ color: methodStyle[item2.requestType] }">{{ item2.requestType
                        }}</span>
                    </el-menu-item>
                  </el-menu-item-group>
                </el-sub-menu>
              </template>
            </div>
          </el-sub-menu>
        </template>
        <template v-else>
          <el-menu-item @click="handleNodeClick(item)" :index="item.id.toString()">
            <span>{{ item.name }}</span>
            <span class="method" :style="{ color: methodStyle[item.requestType] }">{{ item.requestType }}</span>
          </el-menu-item>
        </template>
      </div>

    </el-menu>
  </div>
</template>

<script setup lang="ts">
import * as apihubApi from '@/api/apihub'
const emit = defineEmits(['add-directory', 'edit-directory', 'create-interface', 'create-case', 'node-click', 'delete-node', 'selectNodes', 'import-interface', 'markdown', 'importSetTime'])
const treeData = ref([] as any)
const loading = ref(false)
import { propTypes } from '@/utils/propTypes'
const props = defineProps({
  projectId: propTypes.number.def(),
})
/** 请求类型颜色定义 */
const methodStyle = ref({
  'GET': '#17b26a',
  'POST': '#ef6820',
  'DELETE': '#f04438',
  'PUT': '#2e90fa',
})

const filterText = ref('')
/** 监听过滤字段变化 */
watch(filterText, (val) => {
  // treeRef.value!.filter(val)
})
watch(props, (val) => {
  console.log(props)
})

onMounted(() => {
  getTreeData()
})

const defaultActive = ref('')
const defaultOpeneds = ref([''])
/**
 * 获取树结构数据
 * */
const getTreeData = async () => {
  loading.value = true
  try {
    let res = await apihubApi.apiTree({ projectId: props.projectId })
    treeData.value = res.children
    defaultActive.value = res.children[0].children[0].id.toString()
    defaultOpeneds.value = [res.children[0].id.toString()]
    handleNodeClick(treeData.value[0].children[0])
  } catch (error) {
    console.log(error)
  } finally {
    loading.value = false
  }
}

/**
 * 节点点击
 * */
const handleNodeClick = async (data) => {
  emit('node-click', data)
}

defineExpose({ handleNodeClick, getTreeData })
</script>

<style scoped lang="scss">
.doc-menu {
  .method {
    font-style: normal;
    margin-right: 5px;
    font-size: 12px;
    font-weight: 700;
  }

  .el-menu {
    border-right: solid 0px;
  }

  .el-sub-menu__title {
    height: 40px;
    line-height: 40px;
    color: #344054;
    font-weight: 600;
  }

  .el-menu-item {
    height: 40px;
    line-height: 40px;
    justify-content: space-between;
  }

  .el-menu-item-group__title {
    padding: 0;
  }
}
</style>
